<template>
  <div class="navication-content">
    <div class="na-left">
      <div class="na-left-item">
        <span>
          最新文章
          <span> </span>
        </span>
      </div>
    </div>
    <div class="na-center">
      <div class="na-center-item">
        <ul class="center-ul">
          <li
            :class="{ 'center-li': true, active: crunteIndex == index }"
            v-for="(item, index) in classifiationData"
            :key="item.classiId"
          >
            <a :dianIndex="index" href="" @click.prevent="clickLi($event,item.classiName)"
              >{{ item.classiName }}<span></span
            ></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="na-right">
      <span><a href="">更多>></a></span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import pubsub from "pubsub-js"
export default {
  name: "Navication",
  data() {
    return {
      classifiationData: [],
      crunteIndex: -1,
    };
  },
  mounted() {
    const that = this;
    axios
      .get("/aabbcc/classifiation/selectAllClassifiation")
      .then(function (response) {
        that.classifiationData = response.data.obj;
      });
  },
  methods: {
     clickLi(e,item) {
      this.crunteIndex = e.target.getAttribute("dianIndex");

      //判断状态调用不同的方法查询数据
      if(item == "首页"){
        this.$router.push({
          name:"home"
        })
      }else if(item == "心情随笔"){
           //通过发布消息到展示页面articlejiegou.vue
            pubsub.publish("articleInfos","moodEssayArticle")
      }else if(item == "面试题"){
            //通过发布消息到展示页面articlejiegou.vue
            pubsub.publish("articleInfos","intervievArticle")
      }else if(item == "错误笔记"){
          //通过发布消息到展示页面articlejiegou.vue
          pubsub.publish("articleInfos","erroNoteArticle")
      }else if(item == "BUG"){
           //通过发布消息到展示页面articlejiegou.vue
          pubsub.publish("articleInfos","bugArticle")
      }
    },
  },
};
</script>

<style scoped>
.active > a {
  color: #2882c5 !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}
.navication-content {
  width: 100%;
  height: 100%;
  display: flex;
}
.na-left {
  width: 6%;
  height: 100%;
}
.na-left-item > span {
  line-height: 50px;
  margin-left: 10px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #2882c5;
  position: relative;
}
.na-left-item > span > span {
  height: 6px;
  background-color: aqua;
  width: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0.3;
}
.na-center {
  width: 80%;
  height: 100%;
}
.na-center-item .center-ul::after {
  content: "";
  display: block;
  clear: both;
}
.na-center-item .center-ul {
  line-height: 50px;
}
.na-center-item .center-ul .center-li {
  float: left;
  margin-left: 20px;
}
.na-center-item .center-ul .center-li > a {
  padding: 15px 10px;
  color: #303133;
  position: relative;
  font-size: 15px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.na-center-item .center-ul .center-li > a > span {
  display: inline-block;
  width: 100%;
  height: 2px;
  background: #2882c5;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}
.na-center-item .center-ul .center-li > a:hover {
  color: #2882c5;
  transition: all 0.5s linear;
}
.na-center-item .center-ul .center-li > a:hover > span {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.5s linear;
}

.na-right {
  width: 14%;
  height: 100%;
  position: relative;
}
.na-right > span {
  position: absolute;

  right: 7px;
  top: 20px;
}
.na-right > span > a {
  color: #303133;
  position: relative;
  font-size: 12px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.na-right > span > a:hover {
  color: #2882c5;
  transition: all 0.5s linear;
}
</style>